<template>
  <div class=" app-container m-upload-excel">
    <el-upload
        style="width: 100%"
        class="upload-demo"
        drag
        action="/"
        :before-upload="beforeUploadAction"
        type="file" accept=".xlsx, .xls"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        拖拽上传 <em>或者点击上传 Excel</em>
      </div>
    </el-upload>
    <div>
      <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
        <el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  const ExcelJS = require("exceljs");

  export default {
    data(){
      return{
        tableData:[],
        tableHeader:[]
      }
    },
    methods:{
      beforeUploadAction(file, fileLi){
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.onload = async e => {
            const data = e.target.result
            const workbook = new ExcelJS.Workbook();
            try {
              let res = await workbook.xlsx.load(data)
              const sheets =
                  res._worksheets &&
                  res._worksheets.filter((item) => typeof item !== "undefined");
              const table = [];
              let headers = []
              sheets.forEach((sheet) => {
                sheet._rows.forEach((row,index) => {
                  if(index===0){
                    row.values.forEach(it=>{
                      headers.push(it)
                    })
                  }else {
                    let obj = {}
                    let arr = []
                    row.values.forEach(it=>{
                      arr.push(it)
                    })
                    headers.forEach((ite,i)=>{
                      obj[ite] = arr[i]
                    })
                    table.push(obj);
                  }
                  // const tableRow = {
                  //   position: "",
                  //   val: "",
                  // };
                  // row._cells.forEach((cell) => {
                  //   tableRow.position = cell._address;
                  //   tableRow.val = cell._value.model.value || "";
                  // });
                });
              });
              this.tableData = table
              this.tableHeader = headers
            }catch (e){
              this.$message.error('解析失败')
            }
          }
          reader.readAsArrayBuffer(file)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep{
  .el-upload{
    width: 100%;
  }
  .el-upload-dragger{
    width: 100%;
  }
}
</style>
